@layer utilities {
  /* Background & line spacing for code blocks */
  /* eg: The demo code block on the landing page */
  figure.bg-fd-card:has(pre),
  figure.bg-fd-secondary:has(pre) {
    @apply bg-zinc-50/50 leading-normal dark:bg-zinc-900/50;
  }
}

@layer components {
  /* Line up the Callout left coloured border with the outer border */
  .bg-\(--callout-color\)\/50[role='none'] {
    margin-left: -5.5px;
    margin-right: 5.5px;
  }
}

/* Center-align copy button in code blocks with single line */
@layer utilities {
  figure:has(pre code > .line:only-child) > div:has(button) {
    @apply top-2 bottom-2 flex items-center;
  }
}

/* Highlighted words in code blocks */
.shiki:not(.not-fumadocs-codeblock *) code span.highlighted-word {
  @apply -mx-1 rounded-sm border-none px-1;
}

/* Highlighted lines in code blocks */
@supports (color: color-mix(in lab, red, red)) {
  .shiki:not(.not-fumadocs-codeblock *) code .line.highlighted {
    background-color: var(--color-fd-secondary);
  }
}

.shiki:not(.not-fumadocs-codeblock *):has(> code .line) {
  & code {
    /*
      Reduce vertical padding to allow two inline code blocks
      on adjacent lines to avoid overlapping.
    */
    padding-block: 1.5px;
  }
}

/* Avoid a flash of black (in dark mode) in the navbar background when scrolling */
header#nd-nav.bg-fd-background\/80,
header#nd-subnav.bg-fd-background\/80 {
  background-color: hsla(var(--background) / 0.8);
}

/* Tabs with code blocks (eg: loaders) */
@layer utilities {
  div:has(> [role='tablist']) {
    @apply bg-fd-card;
    & [role='tablist'] {
      @apply border-border border-b;
    }
    & > [role='tabpanel'] {
      @apply rounded-t-none;
      & figure:has(pre) {
        @apply rounded-t-none border-t-0;
      }
    }
  }
}
